import { User, Loader } from 'lucide-react';
import type { AvatarGroup, Avatar } from '../../types/avatar';
import type { VideoGenerateRequest } from '../../types/video';

interface AvatarTabProps {
  formData: VideoGenerateRequest;
  avatarGroups: AvatarGroup[];
  avatarsInGroup: Avatar[];
  selectedGroupId: string;
  loadingGroups: boolean;
  loadingAvatars: boolean;
  onGroupSelect: (groupId: string) => void;
  onAvatarSelect: (avatar: Avatar) => void;
}

export default function AvatarTab({
  formData,
  avatarGroups,
  avatarsInGroup,
  selectedGroupId,
  loadingGroups,
  loadingAvatars,
  onGroupSelect,
  onAvatarSelect,
}: AvatarTabProps) {
  return (
    <div className="space-y-6">
      {/* Avatar Groups */}
      <div>
        <label className="block text-sm font-semibold text-gray-800 mb-2">
          <span className="text-red-500">*</span> 选择数字人组
        </label>
        {loadingGroups ? (
          <div className="flex items-center justify-center py-8">
            <Loader className="w-6 h-6 text-blue-500 animate-spin" />
          </div>
        ) : (
          <div className="grid grid-cols-2 gap-3">
            {avatarGroups.map(group => (
              <button
                key={group.group_id}
                onClick={() => onGroupSelect(group.group_id)}
                className={`p-3 border rounded-lg text-left hover:border-blue-300 cursor-pointer ${
                  selectedGroupId === group.group_id
                    ? 'border-blue-500 bg-blue-50'
                    : 'border-gray-200'
                }`}
              >
                <div className="flex items-start gap-3">
                  {group.preview_image ? (
                    <img
                      src={group.preview_image}
                      alt={group.name}
                      className="w-12 h-12 rounded object-cover"
                    />
                  ) : (
                    <div className="w-12 h-12 bg-gray-200 rounded flex items-center justify-center">
                      <User className="w-6 h-6 text-gray-500" />
                    </div>
                  )}
                  <div className="flex-1">
                    <p className="font-semibold text-sm text-gray-900">{group.name}</p>
                    <p className="text-xs text-gray-700">
                      {group.num_looks} 个Avatar • {group.group_type}
                    </p>
                    {group.group_type === 'PHOTO' && (
                      <p className="text-xs text-blue-600 font-medium">Talking Photo</p>
                    )}
                  </div>
                </div>
              </button>
            ))}
          </div>
        )}
      </div>

      {/* Avatars in selected group */}
      {selectedGroupId && (
        <div>
          <label className="block text-sm font-semibold text-gray-800 mb-2">
            <span className="text-red-500">*</span> 选择数字人
          </label>
          {loadingAvatars ? (
            <div className="flex items-center justify-center py-8">
              <Loader className="w-6 h-6 text-blue-500 animate-spin" />
            </div>
          ) : avatarsInGroup.length > 0 ? (
            <div className="grid grid-cols-3 gap-3 max-h-96 overflow-y-auto">
              {avatarsInGroup.map(avatar => (
                <button
                  key={avatar.avatar_id}
                  onClick={() => onAvatarSelect(avatar)}
                  className={`p-3 border rounded-lg text-left hover:border-blue-300 cursor-pointer ${
                    formData.avatar_id === avatar.avatar_id ||
                    formData.talking_photo_id === avatar.avatar_id
                      ? 'border-blue-500 bg-blue-50'
                      : 'border-gray-200'
                  }`}
                >
                  {avatar.preview_image ? (
                    <img
                      src={avatar.preview_image}
                      alt={avatar.name}
                      className="w-full aspect-square rounded object-cover mb-2"
                    />
                  ) : (
                    <div className="w-full aspect-square bg-gray-200 rounded flex items-center justify-center mb-2">
                      <User className="w-8 h-8 text-gray-500" />
                    </div>
                  )}
                  <div className="text-center">
                    <p className="font-semibold text-sm text-gray-900 truncate">{avatar.name}</p>
                    {avatar.default_voice_id && (
                      <p className="text-xs text-green-600 font-medium mt-1">有默认语音</p>
                    )}
                  </div>
                </button>
              ))}
            </div>
          ) : (
            <div className="text-center py-8 text-gray-700">
              <User className="w-12 h-12 text-gray-400 mx-auto mb-2" />
              <p className="font-medium">该组暂无可用的数字人</p>
            </div>
          )}
        </div>
      )}
    </div>
  );
}
